<template>
  <BasicDrawer v-bind="$attrs" :title="getTitle" width="50%" @register="register">
    <div>
      <BasicForm @register="registerForm" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts" name="DrawerForm" setup>
  import { computed, ref } from 'vue';

  import { getServiceCreate, getServiceUpdate } from '@/api/page/dashboard';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { useMessage } from '@/hooks/web/useMessage';
  import { dateUtil } from '@/utils/dateUtil';

  import { schemas } from '../data';

  const { createMessage } = useMessage();

  const getTitle = computed(() => title.value);
  const title = ref<string>('');
  const details = ref<object>({});
  const emit = defineEmits(['next', 'register']);
  const [registerForm, { setFieldsValue, validate, setProps }] = useForm({
    schemas,
    layout: 'vertical',
    actionColOptions: {
      span: 24,
    },
    showResetButton: false,
    showSubmitButton: true,
    submitButtonOptions: {
      text: '提交',
    },
    submitFunc: customSubmitFunc,
  });
  const [register, { closeDrawer }] = useDrawerInner((data) => {
    title.value = data.title;
    details.value = data.record || {};
    if (data.title === '详情') {
      const detailSchemas = schemas.map((item) => ({
        ...item,
        componentProps: {
          disabled: true,
        },
      }))
      setProps({
        showSubmitButton: false,
        schemas: detailSchemas,
      })
    } else {
      const detailSchemas = schemas.map((item) => ({
        ...item,
        componentProps: {
          disabled: false,
        },
      }))
      setProps({
        showSubmitButton: true,
        schemas: detailSchemas,
      })
    }

    data.record &&
      setFieldsValue({
        ...data.record,
      });
  });

  async function customSubmitFunc() {
    try {
      const values = await validate();
      values.firstFollowUpDate = values.firstFollowUpDate
        ? dateUtil(values.firstFollowUpDate).format('YYYY-MM-DD HH:mm:ss')
        : null;
      values.secondFollowUpDate = values.secondFollowUpDate
        ? dateUtil(values.secondFollowUpDate).format('YYYY-MM-DD HH:mm:ss')
        : null;
      values.thirdFollowUpDate = values.thirdFollowUpDate
        ? dateUtil(values.thirdFollowUpDate).format('YYYY-MM-DD HH:mm:ss')
        : null;
      if (title.value === '添加') {
        getServiceCreate(values).then((res) => {
          if (res.code === 1000) {
            createMessage.success('添加成功！');
            emit('next', values);
          } else {
            createMessage.error('添加失败，请重试！');
          }
        });
      } else {
        const params = Object.assign({}, details.value, values);
        getServiceUpdate(params).then((res) => {
          if (res.code === 1000) {
            createMessage.success('修改成功！');
            emit('next', values);
          } else {
            createMessage.error('修改失败，请重试！');
          }
        });
      }
      closeDrawer();
    } catch (error) {
      console.log('error', error);
      createMessage.error('请将有红色标记的填写完整');
    }
  }
</script>
<style scoped>
  :deep(.ant-form-item-control) {
    padding: 0 10px;
  }
</style>
